import React, {FC, PropsWithChildren} from 'react';
import "./index.less";
import JournalDefaultLayout from "@/pages/JournalPage/JournalDetail/commons/JournalDefaultLayout";
import classNames from "classnames";
import MilestoneStats from "@/pages/JournalPage/JournalDetail/JournalStatistic/MilestoneStats";
import TrendStats from "@/pages/JournalPage/JournalDetail/JournalStatistic/TrendStats";

interface JournalStatisticProps {
  title?: React.ReactNode;
  extra?: React.ReactNode;
  className?: string;
  style?: React.CSSProperties;
}

export const JournalStatisticCard: FC<PropsWithChildren<JournalStatisticProps>> = (props) => {
  const {title, extra, className, style, children} = props;
  return (
    <div className={classNames("journal-statistic-card", className)} style={style}>
      <div className={"journal-statistic-card-header"}>
        <div className={"journal-statistic-card-title"}>
          {title}
        </div>
        <div className={"journal-statistic-card-extra"}>
          {extra}
        </div>
      </div>
      <div className={"journal-statistic-card-content"}>
        {children}
      </div>
    </div>
  )
}


interface JorStatisticProps {
  color?: string;
  icon?: React.ReactNode;
  title?: React.ReactNode;
  value?: React.ReactNode;
  className?: string;
  style?: React.CSSProperties;
}

export const JorStatistic: FC<JorStatisticProps> = (props) => {
  const {icon, title, value, className, style, color} = props;

  return (
    <div className={classNames("jor-statistic", className)} style={style}>
      <div className={"jor-statistic-icon"} style={{color: color}}>
        {icon}
      </div>
      <div className={"jor-statistic-val"} style={{color: color}}>
        {value}
      </div>
      <div className={"jor-statistic-title"}>
        {title}
      </div>
    </div>
  )
}

interface JournalStatisticProps {
}

const JournalStatistic: FC<JournalStatisticProps> = (props) => {
  return (
    <JournalDefaultLayout>
      <div className={"journal-statistic-container"}>
        <MilestoneStats/>
        <TrendStats/>
      </div>
    </JournalDefaultLayout>
  );
};

export default JournalStatistic;
